<template>
  <p class="event-item" :class="cssClasses" @click="$emit('click', event, $event)">
    <slot :event="event" v-if="showTitle"> Def: {{ event.title }} </slot>
  </p>
</template>

<script>
import moment from 'moment'

export default {
  name: 'CalendarEventCard',
  props: ['event', 'date', 'firstDay'],
  computed: {
    cssClasses() {
      let cssClasses = this.event.cssClass

      if (!Array.isArray(cssClasses)) {
        cssClasses = [cssClasses]
      } else {
        cssClasses = Array.from(cssClasses)
      }

      if (this.start.isSame(this.date, 'day')) {
        cssClasses.push('is-start')
      }

      if (this.end.isSame(this.date, 'day')) {
        cssClasses.push('is-end')
      }

      if (!this.event.isShow) {
        cssClasses.push('is-opacity')
      }

      return cssClasses.join(' ')
    },
    showTitle() {
      return this.date.day() === this.firstDay || this.start.isSame(this.date, 'day')
    },
    start() {
      return moment(this.event.start)
    },
    end() {
      return moment(this.event.end)
    }
  }
}
</script>

<style scoped></style>
